<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
     一个指令定义对象可以提供以下几个钩子函数
     bind:只调用一次，指令第一次绑定到元素是调用
     inserted:被绑定元素插入父节点时调用（保证父节点存在，但不一定已被插入文档中)
     update:所在组件的VNode更新时调用，但是可能发生在其子VNode
     更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过
     比较更新前后的值来忽略不必要的模板更新
     componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用
     unbind:只调用一次，指令与元素解绑是调用
     -->
    <!-- 
         钩子函数参数
         el:指令所绑定的元素，可以用来直接操作DOM
         binging:一个对象，包含以下property
            name:指令名，不包括v-前缀
            value:指令的绑定值，例如：v-my-directive="1+1"中，绑定值为2
            oldValue:指令绑定的前一个值，仅在update和componentUpdate钩子中
            可用，无论值是否改变都可用
            expression:字符串形式的指令表达式。例如v-my-directive钩子中可用
            arg:传给指令的参数，可选
            modifiers:一个包含修饰符的对象
        vnode:vu编译生成的虚拟节点
        oldVnode：上一个虚拟节点
      -->
    <script src="../../package/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app" v-demo:foo.a.b="message">

    </div>
    <script>
        Vue.directive('demo', {
            bind: function (el, binding, vnode) {
                var s = JSON.stringify
                el.innerHTML = 'name: ' + s(binding.name) + '<br>' +
                    'value: ' + s(binding.value) + '<br>' +
                    'expression: ' + s(binding.expression) + '<br>' +
                    'argument: ' + s(binding.arg) + '<br>' +
                    'modifiers: ' + s(binding.modifiers) + '<br>' +
                    'vnode keys: ' + Object.keys(vnode).join(', ')
            }
        })
        new Vue({
            el: "#app",
            data:{
                message:'hello'
            }
        })
    </script>
</body>

</html>